<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        第一步:引包 2.6.14完整版本的依赖包 
        Vue依赖包:尤雨溪团队，给开发人员提供很多版本的依赖包  【完整版本、压缩版本、运行时版本】
    -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root"></div>
</body>

</html>
<script>

    //组件在使用的时候分为三步:定义、注册、使用

    //定义组件:利用Vue.extend方法去定义组件，定义组件的时候,
    //extend方法也需要传递配置项
    //组件注意事项:不能书写el 、组价响应式数据务必书写为函数

    const App = Vue.extend({
        data() {
            return { msg: '我是App,我是一个组件' }
        },
        template: `<div>
            <h1>{{msg}}</h1>
            </div>`
    })

    //关联VM:Vue构造函数的实例,项目当中只能有一个VM实例
    const VM = new Vue({
        el: '#root',
        //注册App:在注册的时候,底部的K决定了你使用组件标签名字
        components: {
            App
        },
        //模板的编辑器，相当于曾经书写在顶部的容器里面是一样的
        //Vue构造函数的配置项与组件的配置项基础一模一样
        template: `<App></App>`

    })
</script>